Menüleisten
Zu den wichtigsten Elementen einer Website gehören Menüleisten, die das Springen von einer Seite zur anderen ermöglichen. Diese Menüleisten werden in der Regel als Listen oder als Tabellen realisiert. Entsprechend sind die Listenelemente bzw. die Inhalte der Tabellenzellen Hyperlinks auf andere Seiten der Website.
Hyperlinks
Hyperlinks werden in HTML folgendermaßen geschrieben:
Um die Links mit CSS zu formatieren, nutzt man den Selektor a. Da man aber üblicherweise verschiedene Links (Verweise, Menüpunkte etc.) unterschiedlich formatieren möchte, kann man hier mit kombinierten Selektoren arbeiten. Mit li a kann man alle Links in einem Listenelement ansprechen, mit td a alle Links innerhalb einer Tabellenzelle.
Weiterhin kann man mit a:hover das Aussehen beim Überfahren des Links mit der Maus steuern und mit a:visited das Aussehen besuchter Links.
Aufgabe
Wir statten nun unsere Übung 11 mit Navigationsleisten aus. Lade Dir zu diesem Zweck die aktualisierte Quelldatei herunter und öffne sie wie gewohnt im Liveweave-Editor. Ergänze nun folgenden CSS-Code:
- Die Liste im div "nav" rückt 150px vom oberen Rand weg.
- Bei den Listenelementen werden die Aufzählungszeichen entfernt. Die Schriftart ist Arial und der Innenabstand ist nach allen Seiten 10px. Zusätzlich gilt: display:block
- Die Links innerhalb der Listenelemente und der Tabellenzellen haben eine Schriftgröße von 16px, sie sind weiß und nicht unterstrichen.
- Beim Überfahren mit der Maus werden diese Links unterstrichen, fett und bekommen Schriftgröße 18px.
- Die Tabellenzellen sind 80px breit, haben einen Innenabstand von 5px, der Text ist zentriert und in der Schriftart Arial. Zudem haben sie einen 1px breiten, durchgezogenen weißen Rahmen.
- Nun sind nur noch kleinere Anpassungen im Gesamtbild vorzunehmen, die ein bißchen Rechenarbeit erfordern.